<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="~{custom/common/common::header}"></div>
</head>

<body>
<div th:replace="~{custom/common/common::nav (navName = ${navName})}"></div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block" th:each="searchInput : ${searchInputs}">
                            <input type="text" th:name="${searchInput.name}" th:id="${searchInput.id}" th:placeholder="${searchInput.placeholder}" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"> <i class="layui-icon">&#xe615;</i></button>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="resetBtn"><i class="layui-icon">&#xe666;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-hide" id="tableList"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    getColsConfig = function () {
        let result = new Array();
        let colsArray = new Array();
        [# th:each="colsConfig : ${tableConfig.cols}"]
            let temCols[[${colsConfigStat.index+1}]] = new Object();
            temCols[[${colsConfigStat.index+1}]].field = [[${colsConfig.field}]];
            temCols[[${colsConfigStat.index+1}]].title = [[${colsConfig.title}]];
            temCols[[${colsConfigStat.index+1}]].width = [[${colsConfig.width}]];
            colsArray.push(temCols[[${colsConfigStat.index+1}]]);
        [/]
        result.push(colsArray);
        return result;
    }

    getSearchInputWhereConfig = function () {
        let result = new Object();
        [# th:each="searchInput : ${searchInputs}"]
        result.[(${searchInput.id})] = '';
        [/]
        return result;
    }

    clearSearchInput = function () {
        let result = new Object();
        [# th:each="searchInput : ${searchInputs}"]
        $('#[(${searchInput.id})]').val('');
        [/]
        return result;
    }

    getTableUrl = function () {
        return [[${tableConfig.requestUrl}]];
    }

</script>
<script th:inline="none">
    layui.use(['table', 'form'], function() {
        var table = layui.table,
            form = layui.form;

        table.render({
            elem: '#tableList'
            ,url: getTableUrl()
            ,id: 'tableListId'
            ,limit: 20
            ,cols: getColsConfig()
            ,page: true
        });

        form.on('submit(search)', function(data){
            table.reload('tableListId', {
                page: {
                    curr: 1
                }
                ,where: data.field
            });
            return false;
        });

        form.on('submit(resetBtn)', function(data){
            clearSearchInput();
            table.reload('tableListId', {
                page: {
                    curr: 1
                }
                ,where: getSearchInputWhereConfig()
            });
            return false;
        });

    });
</script>

</html>